import React, { Component } from 'react'
import { Layout, Menu, Breadcrumb, Icon, Dropdown } from 'antd'
import { Route, Switch } from 'react-router-dom'
import { base, router } from '../router'
import '../sass/admin.sass'

const { SubMenu } = Menu
const { Header, Content, Sider } = Layout

class Admin extends Component {
  constructor(props) {
    super(props)
    this.state = {
      openKeys: sessionStorage.getItem('openKeys')
        ? JSON.parse(sessionStorage.getItem('openKeys'))
        : ['0'],
      selectedKeys: sessionStorage.getItem('selectedKeys')
        ? JSON.parse(sessionStorage.getItem('selectedKeys'))
        : ['0-0']
    }
  }

  onSelect = item => {
    sessionStorage.setItem('selectedKeys', JSON.stringify(item.selectedKeys))
    this.props.history.push(item.item.props.path)
  }

  onOpenChange = item => {
    sessionStorage.setItem('openKeys', JSON.stringify(item))
  }

  // 退出登录
  logout = () => {
    sessionStorage.clear()
    this.props.history.push(`${base}login`)
  }

  render() {
    const { openKeys, selectedKeys } = this.state

    // 获取用户保存在sessionStorage里的信息
    // const userInfo = JSON.parse(sessionStorage.getItem('userInfo') || '{}')

    // 临时起个登录名字
    const userInfo = {
      name: 'admin'
    }

    let menu = []
    let route = []
    router.map((v, i) => {
      let item = []
      if (v.children) {
        v.children.map((x, y) => {
          let path = x.path.split('/')
          let url = `${base}admin/${path[0]}-${path[1].toLowerCase()}`
          item.push(
            <Menu.Item key={`${i}-${y}`} path={url}>
              {x.name}
            </Menu.Item>
          )
          route.push(
            <Route
              key={x.path}
              path={url}
              component={require(`./${x.path}.js`).default}
            />
          )
        })
      }
      menu.push(
        <SubMenu
          key={i}
          title={
            <span>
              <Icon type="folder" />
              {v.name}
            </span>
          }
        >
          {item}
        </SubMenu>
      )
    })
    // 下拉菜单
    const dropMenu = (
      <Menu>
        {/*<Menu.Item key="edit" onClick={this.edit}>修改密码</Menu.Item>*/}
        <Menu.Item key="logout" onClick={this.logout}>
          退出登录
        </Menu.Item>
      </Menu>
    )

    return (
      <Layout className="admin">
        <Header className="header">
          <div className="logo">xxxx后台管理系统</div>
          <Dropdown overlay={dropMenu} className="user">
            <div>
              <Icon type="user" /> {userInfo.name}
            </div>
          </Dropdown>
        </Header>
        <Layout>
          <Sider width={200} style={{ background: '#fff' }}>
            <Menu
              mode="inline"
              defaultSelectedKeys={selectedKeys}
              defaultOpenKeys={openKeys}
              style={{ height: '100%', borderRight: 0 }}
              onSelect={this.onSelect}
              onOpenChange={this.onOpenChange}
            >
              {menu}
            </Menu>
          </Sider>
          <Layout style={{ padding: '0 24px 24px' }}>
            <Breadcrumb style={{ margin: '16px 0' }}>
              <Breadcrumb.Item>用户管理</Breadcrumb.Item>
              <Breadcrumb.Item>用户列表</Breadcrumb.Item>
            </Breadcrumb>
            <Content className="admin-content">
              {this.props.children}
              <Switch>{route}</Switch>
            </Content>
          </Layout>
        </Layout>
      </Layout>
    )
  }
}

export default Admin
